<template>
	<view style="height:50px">
		<u-tabbar
			:value="state.tabBarIndex"
			@change="onTabbarClick"
			:fixed="fixed"
			:placeholder="true"
			:safeAreaInsetBottom="true"
			activeColor="#ff8725"
			:zIndex="999"
		> 
			<template v-for="(item,index) in state.tabbs">
				<u-tabbar-item 
					v-if="isTabbarPermisson?isShowItem(item):true"
					:text="item.text"
					:icon="item.icon"
					:color="item.color"
				>
				</u-tabbar-item>
			</template>
		</u-tabbar>
		
		<floatNav></floatNav>
	</view>
</template>

<script>
	import { useTabbarStore } from './tabbarStore.js'
	import floatNav from '@/components/FloatNav.vue'
	
	export default {
		components:{
			floatNav
		},
		setup(){
			let state = useTabbarStore()
			return {state}
		},
		data(){
			return {
				
			}
		},
		props:{
			fixed:{
				type:Boolean,
				default:true
			}
		},
		computed:{
			isShowItem(){
				return (item)=>{
					let result = item.defaultShow == undefined || item.defaultShow === true
					
					if(item.showWhenRoles) result ||= this.$permission(item.showWhenRoles)
					if(item.hideWhenRoles) result &&= !this.$permission(item.hideWhenRoles)
					
					console.log(result)
					
					return result
				}
			}
		},
		methods:{
			onTabbarClick(index){
				console.log(index)
				this.state.tabBarIndex = index
				
				
				if(this.state.tabbs[index].isInnerPage)
				{
					console.log(index)
					this.$emit('change',index)
				}else{
					console.log(this.state.tabbs[index].url)
					
					uni.$Router.pushTab({path: this.state.tabbs[index].url})
					
					// uni.switchTab({
					// 	url:this.state.tabbs[index].url
					// })
				}
			}
		}
	}
</script>